<html>
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

    <body>
        <div class="div_btn"><button id="btn" onclick="window.location.href='/'">返回首页</button></div>
        <div id="test">
            <div>list的key:<input type="text"  value="" id="list_key"/></div>
            <div>list的value:<input type="text"  value="" id="list_value"></div>
            <div><button onclick="redis_list()">入列</button></div>           
        </div> 
        <div>
            <div>当前队列中前20的key:</div>
            <div id="keys-container"></div> <!-- 添加一个容器来显示键 -->
        </div>
 
    </body>

   <script type="text/javascript">

        window.onload = function(){
            //加载时先获取redis中前20的key
            get_keys();
        }
        //查询当前redis中前20的key
        function get_keys(){
            
            ajaxRequest('get_keys','get',null,function(data){
                if(data.code == 200){
                    displayKeys(data.data);
                }else{
                    displayKeys([]);
                }
            });
        }
         // 显示键的函数
         function displayKeys(keys) {
            var keysContainer = document.getElementById('keys-container');
            keysContainer.innerHTML = ''; // 清空容器

            if (keys.length > 0) {
                keys.forEach(function(key) {
                    var keyElement = document.createElement('div');
                    keyElement.textContent = key;
                    // 创建删除按钮
                    var deleteButton = document.createElement('button');
                    deleteButton.textContent = '删除';
                    deleteButton.style.marginLeft = '10px'; // 设置按钮左边距
                    deleteButton.onclick = function() {
                        deleteKey(key); // 点击按钮时调用删除函数
                    };

                    // 将删除按钮添加到 keyElement 中
                    keyElement.appendChild(deleteButton);
                    
                    keysContainer.appendChild(keyElement);
                });
            } else {
                keysContainer.textContent = 'No keys found';
            }
        }
        // 删除键的函数
        function deleteKey(key) {
            ajaxRequest('delete_key', 'post', { key: key }, function(data) {
                if (data.code == 200) {
                    alert('删除成功');
                    get_keys(); // 删除成功后刷新键列表
                } else {
                    alert('删除失败');
                }
            });
        }
        // 入列
        function redis_list(){
            var list_key = document.getElementById("list_key").value;
            var list_value = document.getElementById("list_value").value;
            
            ajaxRequest(
                'test_redis_list',
                'post',
                {'key':list_key,'value':list_value},
                function(data){
                    console.log(data);
                if(data.code == 200){
                    alert(data.msg);
                }else{
                    alert(data.msg);
                }
            });
          
        }
        
        //原生Ajax请求定义

        function ajaxRequest(url, method, data, callback) {  

            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 定义请求的类型、URL以及是否异步处理
            xhr.open(method, url, true);

            // 设置请求头，指定发送的数据类型为JSON
            xhr.setRequestHeader('Content-Type', 'application/json');
            //laravel框架需要设置csrf 防渗透验证
            var csr = document.getElementsByName('csrf-token')[0].getAttribute('content');
            xhr.setRequestHeader('X-CSRF-TOKEN', csr);

            // 定义请求完成后的回调函数
            xhr.onload = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    // 请求成功，处理返回的数据                        
                    callback(JSON.parse(xhr.responseText));
                    //console.log('Response:', xhr.responseText);
                } else {
                    // 请求失败，处理错误
                    console.error('Request failed with status:', xhr.status);
                }
            };

            // 定义请求出错时的回调函数
            xhr.onerror = function () {
                console.error('Request failed');
            };
            
            // 发送请求，将数据转换为JSON格式
            xhr.send(JSON.stringify(data));

        }
        
   </script> 
    <style>
        #keys-container {
            border: 1px solid #ccc; /* 设置边框 */
            height: 200px; /* 设置高度 */
            overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
            padding: 10px; /* 设置内边距 */
        }
        #btn {
            position: absolute; /* 绝对定位 */
            right: 20px; /* 距离右侧 20px */
        }
        .div_btn{
            height: 10px;
        }
    </style>

</html>



